<!--
 @description
 @fileName SearchInput.vue
 @author zengqiongying
 @created 2022/08/08 13:36:08
-->
<template>
  <div class="o-search-input">
    <div class="o-select">
      <van-dropdown-menu active-color="#05C4C3">
        <van-dropdown-item v-model="searchField" :options="dropMenuOption" />
      </van-dropdown-menu>
    </div>
    <div class="o-input">
      <van-field
        ref="input"
        v-model="searchValue"
        label=""
        :placeholder="`请输入${searchField==='code'?'零售单号':'顾客姓名'}`"
        :clearable="clearable"
        @blur="onBlur"
        @clear="onClear"
        @keyup.enter.native.stop="clickSearch"
      >
        <div slot="right-icon" class="btn-search" @click.stop="clickSearch">
          <svg-icon icon-class="sousuo-solid" />
        </div>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderSearchInput',
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    value: {
      type: [String, Number],
      default: ''
    },
    focus: {
      type: Boolean,
      default: false
    },
    searchType: {
      type: String,
      default: 'name'
    }
  },
  data() {
    return {
      dropMenuOption: [
        { text: '零售单号', value: 'code' },
        { text: '顾客姓名', value: 'name' }
      ],
      searchField: 'name', // 编码 code , 名字 name
      searchValue: ''
    }
  },
  watch: {
    value: {
      handler(nv) {
        this.searchValue = nv
      },
      immediate: true
    },
    searchType: {
      handler(val) {
        this.searchField = val || 'code'
      },
      immediate: true
    }
  },

  created() {

  },
  mounted() {
    if (this.focus) {
      this.getFocus()
    }
  },
  methods: {
    onBlur() {

    },
    clickSearch() {
      if (this.searchField === '') {
        this.$toast('请先选择关键字类型')
        return
      }
      this.$emit('search', {
        type: this.searchField || '',
        value: this.searchValue || ''
      })
    },
    onClear() {
      this.$emit('clear', this.searchValue)
    },
    getFocus() {
      this.$refs.input.focus()
    },
    blur() {
      this.$refs.input.blur()
    }
  }
}

</script>
<style lang='less' scoped>
.o-search-input{
  height: 52px;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 14px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  .o-select{
    width:80px;
  }
  .o-input{
    flex:1;
  }
  /deep/ .van-dropdown-menu__bar{
    height:52px;
    .van-dropdown-menu__title{
      font-size:12px;
      padding-left:0;
      color: #7D8091;
    }
  }
  .btn-search{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    align-content: center;
  }
  /deep/ .van-cell{
    padding:10px 16px;
    height: 50px;
    line-height:30px;
    .van-field__left-icon{
      margin-right: 10px
    }
    .svg-icon{
      color: #00C8B4;
      font-size: 18px;
    }
    .van-icon-clear{
      font-size: 16px;
      color: #7D8091;
    }
  }
}
</style>
